<template>
  <div class="container">
    <div class="topSearch">
      <div class="form">
        <el-form ref="form" :model="form" label-width="10px" class="formSelf">
          <el-form-item>
            <el-input
              placeholder="隐患名称"
              v-model="form.dangerName"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="form.dangerGrade" placeholder="请选择隐患等级">
              <el-option
                v-for="item in columns3"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              class="selectBox"
              v-model="form.changeStatus"
              placeholder="隐患状态"
            >
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="search" icon="el-icon-search" @click="searchForm"
              >查询</el-button
            >
            <el-button
              class="reset"
              icon="el-icon-refresh-right"
              @click="resetForm"
              >重置</el-button
            >
            <el-button
              v-permission="'problemRegisterAdd'"
              class="search"
              icon="el-icon-plus"
              @click="addProblem"
              >新增隐患</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="tableBox">
      <div class="tableTitle"></div>
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column align="center" prop="dangerName" label="隐患名称" />
        <el-table-column
          align="center"
          prop="dangerDescribe"
          label="隐患描述"
        />
        <el-table-column
          prop="dangerImg1"
          label="隐患图片"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <div>
              <img
                v-for="item in scope.row.imgList"
                :key="item"
                :src="scope.row.dangerImg1"
                alt=""
                class="scopeImg"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="dangerGradeName"
          label="隐患等级"
        />
        <el-table-column
          align="center"
          prop="dangerSourceName"
          label="隐患来源"
        />
        <el-table-column
          align="center"
          prop="dangerKindName"
          label="隐患类别"
        />
        <el-table-column align="center" prop="createdTime" label="创建时间" />
        <el-table-column prop="dangerImg1" label="状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.changeStatusName }}
          </template>
        </el-table-column>

        <el-table-column align="center" prop="address" label="操作">
          <template slot-scope="scope">
            <div class="btnBox">
              <div
                slot="reference"
                class="first"
                v-permission="'problemRegisterDetail'"
                @click="handleDetail(scope.row)"
              >
                详情
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footerPage">
      <el-pagination
        :current-page="hiddenTroubleParams.PageIndex"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next"
        :total="totalItemCount"
        @size-change="handleSizeChange"
        @current-change="currentPage"
      />
    </div>

    <addProblem :addDialog.sync="addDialog" :dialogId="dialogId"></addProblem>
    <problemDetail
      :detailDialog.sync="detailDialog"
      ref="problemDetailRef"
    ></problemDetail>
  </div>
</template>

<script>
import addProblem from "./components/addProblem";
import problemDetail from "./components/problemDetail";
import { hiddenTroublePageApi } from "@/api/problemPage/problemRegister";
import { dictionaryListApi } from "@/api/login";
// import { getUserInfo } from "@/utils/auth";

export default {
  name: "problemRegister",
  props: {},
  components: {
    addProblem,
    problemDetail,
  },
  data() {
    return {
      form: {
        dangerName: "",
        dangerGrade: "",
        changeStatus: "",
      },
      tableData: [],
      hiddenTroubleParams: {
        page: 1,
        pageSize: 10,
      },
      totalItemCount: null,
      addDialog: false,
      dialogId: null,
      formDate: "",
      searchDate: "",
      columns1: [],
      columns2: [],
      columns3: [],
      options3: [
        {
          value: "1",
          label: "待整改",
        },
        {
          value: "2",
          label: "已整改",
        },
      ],
      detailDialog: false,
      problemDetailRef: null,
      loading: true,
    };
  },
  created() {
    this.getList();
    this.dictionaryList();
  },
  methods: {
    searchForm() {
      this.getList();
    },
    resetForm() {
      this.form = {
        dangerName: "",
        dangerGrade: "",
        changeStatus: "",
      };
      this.hiddenTroubleParams = {
        page: 1,
        pageSize: 10,
      };
      this.getList();
    },
    addProblem() {
      this.addDialog = true;
    },
    handleDetail(row) {
      this.detailDialog = true;

      this.$refs.problemDetailRef.getDetail(row.id);
    },
    currentPage(val) {
      this.hiddenTroubleParams.page = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.hiddenTroubleParams.pageSize = val;
      this.getList();
    },
    async dictionaryList() {
      const res = await dictionaryListApi({
        type: "danger_grade",
      });
      this.columns3 = res.data.map((item) => {
        return {
          text: item.name,
          value: item.code,
        };
      });
      const res2 = await dictionaryListApi({
        type: "danger_source",
      });
      this.columns1 = res2.data.map((item) => {
        return {
          text: item.name,
          value: item.code,
        };
      });
      const res3 = await dictionaryListApi({
        type: "danger_kind",
      });
      this.columns2 = res3.data.map((item) => {
        return {
          text: item.name,
          value: item.code,
        };
      });
    },
    formatDate(date) {
      // console.log(date)
      // 获取年、月、日、时、分、秒
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0"); // 获取小时
      const minutes = String(date.getMinutes()).padStart(2, "0"); // 获取分钟
      const seconds = String(date.getSeconds()).padStart(2, "0"); // 获取秒
      // 拼接成目标格式
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    confirmDate(e) {
      this.formDate = this.formatDate(e).slice(0, 7);
      this.searchDate = this.formatDate(e).slice(0, 7);

      this.getList();
    },
    async getList() {
      const res = await hiddenTroublePageApi({
        page: this.hiddenTroubleParams.page,
        pageSize: this.hiddenTroubleParams.pageSize,
        dangerName: this.form.dangerName,
        changeStatus: this.form.changeStatus ? +this.form.changeStatus : "",
        dangerGrade: this.form.dangerGrade,
        benginTime: this.form.benginTime,
        endTime: this.form.endTime,
      });
      // console.log(res);
      this.tableData = res.data.records;
      this.totalItemCount = res.data.total;
      // 定义前缀
      const keysToExtract = ["dangerImg1", "dangerImg2", "dangerImg3"];
      // 动态提取所有以特定前缀开头的键值对
      this.tableData.forEach((item) => {
        item.imgList = keysToExtract
          .filter(
            (key) =>
              item[key] !== null && item[key] !== "" && item[key] !== undefined
          )
          .map((key) => item[key]);
      });
      // console.log(this.imgList);
      this.loading = false;
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
};
</script>

<style scoped lang="scss">
.container {
  .topSearch {
    background-color: #fff;
    height: 68px;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    .formSelf {
      display: flex;
      align-items: center;
      height: 68px;
      display: flex;
      align-items: center;
      .el-form-item {
        margin-bottom: 0px;
      }
      .search {
        background-color: #249451;
        color: #fff;
      }
      .reset {
        color: #249451;
        border: 1px solid #249451;
      }
      ::v-deep.el-input__inner {
        // background-color: #F5F5FA !important;
        color: #333 !important;
      }
      .el-input {
        width: 150px;
      }
      .el-select {
        width: 150px;
      }
    }
  }
  .tableBox {
    padding: 0 20px;
    background-color: #fff;
    .scopeImg {
      width: 50px;
      height: 50px;
    }
    .btnBox {
      display: flex;
      justify-content: center;
      align-items: center;
      .first {
        // width: 25px;
        height: 25px;
        line-height: 25px;
        // background-color: #4285f4;
        padding: 0 5px;
        color: #249451;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
      }
      .second {
        // width: 100px;
        height: 25px;
        line-height: 25px;
        background-color: #4285f4;
        color: #fff;
        text-align: center;
        margin-left: 5px;
        border-radius: 5px;
        cursor: pointer;
      }
      .third {
        // width: 50px;
        height: 25px;
        line-height: 25px;
        background-color: #d72e2e;
        color: #fff;
        text-align: center;
        margin: 0 5px;
        border-radius: 5px;
        cursor: pointer;
      }
      .third2 {
        width: 50px;
        height: 25px;
        line-height: 25px;
        background-color: #4285f4;
        color: #fff;
        text-align: center;
        margin: 0 5px;
        border-radius: 5px;
        cursor: pointer;
      }
      .last {
        width: 25px;
        height: 25px;
        line-height: 25px;
        background-color: #d72e2e;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
      }
    }
  }
  .footerPage {
    padding: 0 30px 0 0;
    display: flex;
    justify-content: right;
    width: 100%;
    background-color: #f8fafc;
    height: 50px;
    align-items: center;
    margin-top: 10px;

    //  ::v-deep .el-pagination .btn-next, .el-pagination .btn-prev{
    //   background-color: #087 !important;
    // }
  }
}
</style>
